<script setup>
import { ref } from 'vue'
import SiteNotice from '../components/SiteNotice.vue'
import InlineItem from '../components/InlineItem.vue'

import detailData from '../data/AchievementDetailData.json'
import tagData from '../data/AchievementTagData.json'
import { getText } from '../store/txtstore.js'

const achievements = new Map(Object.entries(detailData.data).filter(p => p[1][4]).map(p => [+p[0], p[1]]))
const tags = new Map(Object.entries(tagData.data).map(p => [+p[0], p[1]]))
const groups = new Map()
const names = new Map()
const sums = new Map()
for (const [i, a] of achievements) {
  if (!groups.has(a[4])) {
    groups.set(a[4], [])
    sums.set(a[4], 0)
  }
  if (names.get(a[5][1])) {
    continue
  }
  groups.get(a[4]).push(a)
  names.set(a[5][1], true)
  sums.set(a[4], sums.get(a[4]) + a[9][2])
}

const index = ref(1)
function chooseGroup(i) {
  index.value = i
}
</script>

<template>
  <main>
    <SiteNotice/>
    <h1 style="grid-area: h;">危途见证</h1>
    <nav style="grid-area: a;">
      <ul>
        <li v-for="tag of tags.values()" @click="chooseGroup(tag[1])">{{ getText(tag[2][1]) }}</li>
      </ul>
    </nav>
    <article style="grid-area: b;">
      <h2>{{ getText(tags.get(index)[2][1]) }}</h2>
      <p>本组总计坍塌晶条数 {{ sums.get(index) }}</p>
      <table>
        <tr v-for="detail of groups.get(index)">
          <td>{{ getText(detail[5][1]) }}</td>
          <td>{{ getText(detail[6][1]) }}</td>
          <td><InlineItem :item-id="detail[9][1]" :num="detail[9][2]" show-name="show-name" /></td>
        </tr>
      </table>
    </article>
  </main>
</template>

<style scoped>
main {
  display: grid;
  grid-template-areas:
    "s s"
    "h h"
    "a b";
  grid-template-columns: 6em minmax(0, 100%);
}
main > p:first-child {
  grid-area: s;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  border-left: 2px solid #00bd7e;
  cursor: pointer;
  padding: 0.5em;
}
li:hover {
  background: #00bd7e10;
}
h1, h2, table {
  margin: 0.5em 0;
  width: 100%;
}

@media (max-width: 540px) {
  main {
    grid-template-areas:
      "s s"
      "h h"
      "a a"
      "b b";
  }
  ul {
    display: flex;
    font-size: smaller;
  }
  li {
    padding: 0 0.5em;
  }
}
</style>
